<template>
	<view class="settle">
		<view class="settle_box" style="width: 100%;height: 100%;">

			<view class="settle_address" v-if="this.settleAddressList=={}">
				<view class="settle_address_left" style="display: flex;">
					<view class="settle_address_left_img" style="margin-top: 4px;">
						<img class="img" src="./plus-sign.png" alt="">
					</view>

					<text style="margin-left: 5px;">新建收货地址</text>

				</view>
				<view class="settle_address_right">
					<view class="arrow">

					</view>
				</view>
			</view>
			<view v-else class="settle_address_list" style="display: flex;padding-top: 10px;" @click="address()">
				<view class="settle_address_list_left" style="padding-left: 15px;">
					<view>
						<view>
							<text>
								{{this.settleAddressList.receiver}}
							</text>
							<text style="padding-left: 10px;">
								{{this.settleAddressList.mobile}}
							</text>
						</view>
						<view style="margin-top: 10px;padding-left: 5px;">
							{{this.settleAddressList.province+this.settleAddressList.city+this.settleAddressList.area+this.settleAddressList.addr}}
						</view>
					</view>
				</view>
				<view class="settle_address_list_right">
					<view class="arrow"></view>
				</view>
			</view>
			<view class="settle_shoplist" v-for="(item,index) in settleList" :key="index">
				<view class="settle_shoplist_img">
					<img class="img" :src="item.pic" alt="">
				</view>
				<view class="settle_shoplist_text">
					<p>{{item.prodName}}</p>
					<p class="display_flex;" style="margin-top: 20px; display: flex;justify-content: space-between;">
						<span>￥{{item.price}}</span>
						<span style="color: #050;">x<span>{{item.prodCount}}</span></span>
					</p>
				</view>
			</view>
			<view
				style="text-align: right;width: 95%;background: #fff;height: 35px;line-height: 35px;padding-right: 5%;">
				<p>共<span>{{settleCount}}</span>件商品 合计：￥<span>{{settleSum}}</span></p>
			</view>
			<view class="settle_preferential">
				<view>优惠劵：暂无可用</view>
				<view style="display: flex;">
					<view style="width: 50px;">0张</view>
					<view class="arrow"></view>
				</view>
			</view>
			<view class="settle_message">
				<text>买家留言：</text>
				<input class="uni-input" focus placeholder="给卖家留言" />
			</view>
			<view class="settle_box">
				<view class="settle_box_one">
					<text>订单总额:</text>
					<text style="color: red;">￥{{settleSum}}</text>
				</view>
				<view class="settle_box_one">
					<text>运费:</text>
					<text style="color: red;">￥0.00</text>
				</view>
				<view class="settle_box_three">
					<text>优惠金额:</text>
					<text style="color: red;">-￥0.00</text>
				</view>
			</view>
			<view class="settle_sum">
				<text style="padding-right: 20px;">小计：￥{{settleSum}}</text>
			</view>
			<view class="settle_footer">
				<view class="settle_footer_left">
					<p>合计:<span style="color: red;margin-left: 20px;">￥{{settleSum}}</span></p>
				</view>
				<view class="settle_footer_sub" @click="submit_money()">
					提交订单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from "@/utils/request"
	import loginVue from "../login/login.vue"
	export default {
		data() {
			return {
				optionobj: {},
				list: [],
				settleList: [],
				settleSum: 0,
				settleCount: 0,
				settleAddressList: {},

			}
		},
		onLoad(option) {
			this.optionobj = JSON.parse(decodeURIComponent(option.item))
			this.getSettleList()
		},
		methods: {
			getSettleList() {
				request({
					url: "/p/order/confirm",
					method: "post",
					data: {
						addrId: 0,
						orderItem: {
							prodId: this.optionobj.details.prodId,
							skuId: this.optionobj.skuid,
							prodCount: this.optionobj.nums,
							shopId: this.optionobj.details.shopId
						},
						userChangeCoupon: 1
					}
				}).then(res => {
					console.log(this.optionobj);
					this.settleList = res.shopCartOrders[0].shopCartItemDiscounts[0].shopCartItems
					this.settleSum = res.total
					this.settleCount = res.totalCount
					this.settleAddressList = res.userAddr
				})
			},
			address() {
				uni.navigateTo({
					url: "../component/Address/Address"
				})
			},
			submit_money() {
				request({
					url: "/p/order/submit",
					method: "post",
					data: {
						remarks: "",
						shopId: this.list
					},
				}).then(res => {
					request({
						url: "/p/order/pay",
						method: "post",
						data: {
							orderNumbers: res.orderNumbers,
							payType: 1
						}
					}).then(res => {
						console.log(res, "");
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.timeStamp,
							nonceStr: res.nonceStr,
							package: res.packageValue,
							signType: 'MD5',
							paySign: res.paySign,
							success: function(res) {
								uni.navigateTo({
									url: `/pages/tabBar/Shopcar/Shopcar`,
								})
								uni.showToast({
									title: "支付成功"
								})
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					})
				})
			}
		},
	}
</script>

<style scoped>
	@import "./settle.css";
</style>
